
import Link from 'next/link';
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import type { Post } from '@/lib/posts';
import { Calendar, Tag } from 'lucide-react';

type PostCardProps = {
  post: Post;
  onPostDelete?: (slug: string) => void;
};

export function PostCard({ post, onPostDelete }: PostCardProps) {
  return (
    <Card className="flex flex-col h-full overflow-hidden transition-all duration-300 ease-in-out hover:shadow-xl hover:-translate-y-1 border-border/80 group">
      <Link href={`/posts/${post.slug}`} className="flex flex-col flex-grow">
        <CardHeader>
          <CardTitle className="font-headline text-2xl tracking-wide">{post.title}</CardTitle>
          <div className="flex items-center space-x-2 text-sm text-muted-foreground pt-2">
            <Calendar className="h-4 w-4" />
            <span>{post.publishedDate}</span>
          </div>
        </CardHeader>
        <CardContent className="flex-grow">
          <p className="text-muted-foreground">{post.excerpt}</p>
        </CardContent>
      </Link>
      <CardFooter className="flex flex-col items-start gap-4">
        <div className="flex flex-wrap gap-2">
          <Tag className="h-4 w-4 text-muted-foreground mt-0.5" />
          {post.tags.map((tag) => (
            <Badge key={tag} variant="secondary" className="font-normal">{tag}</Badge>
          ))}
        </div>
        <Link href={`/posts/${post.slug}`} className="text-primary-foreground group-hover:underline">
          阅读全文 &rarr;
        </Link>
      </CardFooter>
    </Card>
  );
}
